import { createApp } from 'vue'
import FontFaceObserver from 'fontfaceobserver'
import App from './App.vue'
import router from './router'
import piniaStore from './store'
import empty from '@/directives/empty.directive'
import GimiDialog from '@/components/GimiDialog.vue'
import GimiSubTitle from '@/components/GimiSubTitle.vue'
import 'element-plus/dist/index.css'
import '@/style/init.scss'
import '@/style/element.scss'
import '@/style/common.scss'
import 'remixicon/fonts/remixicon.css'

async function initLoadingMapApp () {
  console.log('All fonts are loading...')
  const loadingBeginTime = new Date().getTime()
  try {
    await Promise.all([
      new FontFaceObserver('nevermind'),
      new FontFaceObserver('nevermindhand'),
      new FontFaceObserver('audiowide'),
      new FontFaceObserver('Arvo'),
      new FontFaceObserver('allseto')
    ].map(font => {
      return font.load('Main', 5000)
    }))
    console.log(`All fonts are available, loading time is ${new Date().getTime() - loadingBeginTime}ms.`)
  } finally {
    const app = createApp(App)
    app.use(piniaStore).directive('empty', empty)
      .component('GimiDialog', GimiDialog)
      .component('GimiSubTitle', GimiSubTitle)
      .use(router).mount('#app')
  }
}

initLoadingMapApp()
